<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <script type="text/javascript" src="Vue.js"></script>
</head>

<body>
    <div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item,index) of list" 
            :key="index"
            :content="item"
            :index="index"
            @delete="handleDelete">
            </todo-item>
        </ul>
    </div>
    <script>

        // 全局组件赛
    Vue.component('todo-item', {
        props: ['content','index'],
        template: '<li @click="handleClick">{{content}}</li>',
        methods: {
            handleClick: function () {
                this.$emit('delete',this.index)
            }
        }
    })

    new Vue({
        el: "#root",
        data: {
            inputValue: '',
            list: []
        },
        methods: {
            handleSubmit: function() {
                this.list.push(this.inputValue)
                this.inputValue = ''
            },
            handleDelete: function (index) {
                this.list.splice(index,1)
            }

        }
    })
    </script>
</body>

</html>